<template>
  <div>
    <header class="login-header">
      <div class="container">
        <h1 class="logo">
          <router-link to="/">小兔鲜</router-link>
        </h1>
        <router-link to="/" class="entry">
          <span>进入网站首页</span>
          <i class="iconfont icon-xiangyou"></i>
        </router-link>
      </div>
    </header>
    <div class="login-section">
      <div class="wrap">
        <nav>
          <h3>账户登录</h3>
        </nav>
        <div class="account-box">
          <div class="from">
            <el-form
              ref="myForm"
              label-width="60px"
              :model="ruleForm"
              :rules="rules"
            >
              <el-form-item label="账户" prop="account">
                <el-input v-model="ruleForm.account"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"></el-input>
              </el-form-item>
              <el-form-item label-width="24px" prop="agree">
                <el-checkbox
                  label="我已同意隐私条款和服务条款"
                  v-model="ruleForm.agree"
                ></el-checkbox>
              </el-form-item>
              <el-button type="primary" class="subBtn" @click="submitForm"
                >点击登陆</el-button
              >
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="login-footer">
      <ul>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">配送与验收</a></li>
        <li><a href="#">商务合作</a></li>
        <li><a href="#">搜索推荐</a></li>
        <li><a href="#">友情链接</a></li>
      </ul>
      <p>CopyRight &copy; 小兔鲜儿</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineOptions, reactive, ref } from "vue";
//引入用户相关的仓库
import { useUserStore } from "@/stores/modules/userStore";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
defineOptions({
  name: "Login",
});
//应用仓库
const userStore = useUserStore();
//  获取表单实例
const myForm = ref();
let router = useRouter();
//表单对象
const ruleForm = ref({
  account: "xiaotuxian001",
  password: "123456",
  agree: false,
});

//自定义校验规则
const validatorAgree = (rule: any, value: any, callback: any) => {
  if (value) {
    callback();
  } else {
    callback(new Error("请勾选协议"));
  }
};
//表单校验规则
const rules = reactive({
  account: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 14, message: "密码长度为6-14位", trigger: "blur" },
  ],
  agree: [{ validator: validatorAgree }],
});
//点击登陆提交数据
const submitForm = async () => {
  //解构需要携带的参数
  const { account, password } = ruleForm.value;
  //确保表单数据验证通过
  await myForm.value.validate();
  //发送用户登录请求 储存到用户信息仓库中
  await userStore
    .getUserInfo({ account, password })
    .then(() => {
      ElMessage({
        type: "success",
        message: "登录成功",
      });
      router.replace({ path: "/" });
    })
    .catch((error) => {
      return Promise.reject(new Error(error));
    });
};
</script>

<style scoped lang="scss">
.login-header {
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .logo {
      width: 200px;
      a {
        display: block;
        height: 132px;
        width: 100%;
        font-size: 0;
        background: url("@/assets/images/logo.png") no-repeat center 18px /
          contain;
      }
    }
    .entry {
      width: 120px;
      margin-bottom: 38px;
      i {
        font-size: 14px;
        color: #999;
        margin-left: 5px;
      }
    }
  }
}
.login-section {
  position: relative;
  height: 488px;
  background: url("@/assets/images/login-bg.png") no-repeat center / cover;
  .wrap {
    position: absolute;
    left: 50%;
    top: 54px;
    width: 380px;
    background: #fff;
    transform: translate3d(100px, 0, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    nav {
      height: 55px;
      line-height: 55px;
      text-align: center;
      padding: 0 40px;
      border-bottom: 1px solid #f5f5f5;
      margin-bottom: 20px;
    }
    .account-box {
      text-align: center;
      .el-input {
        padding-right: 30px;
      }
      .subBtn {
        width: 90%;
        margin-bottom: 20px;
      }
    }
  }
}
.login-footer {
  background-color: #fff;
  padding-top: 50px;
  ul {
    text-align: center;
    li {
      display: inline-flex;
      a {
        display: inline-block;
        padding: 0 10px;
        color: #999;
      }
      ~ li {
        border-left: 2px solid #ccc;
      }
    }
  }
  p {
    text-align: center;
    margin: 20px;
  }
}
</style>
